<template>
  <div class="run_details">
    <!-- <Card> -->
    <div class="detail_module">
      <div class="top">
        <div class="device_name">
          {{ deviceTypeEnum[deviceInfo.deviceType as string]?.text }} -
          {{ deviceInfo.model || '-' }}
        </div>
        <div>
          <Space :size="8">
            <!-- <Button type="primary" @click="onDownLoad">下载</Button> -->
            <Button
              type="primary"
              @click="router.back()"
              :icon="h(LeftOutlined)"
              >返回</Button
            >
          </Space>
        </div>
      </div>
      <div class="info">
        <Row style="margin: 20px 0">
          <Col span="6">
            <span>设备型号：</span><span>{{ deviceInfo.model || '-' }}</span>
          </Col>
          <Col span="6">
            <span>设备厂商：</span
            ><span>{{ deviceInfo.manufacturer || '-' }}</span>
          </Col>
          <Col span="6">
            <span>软件版本：</span><span>{{ deviceInfo.version || '-' }}</span>
          </Col>
          <Col span="6">
            <span>设备状态：</span
            ><span
              >{{ onlineEnum[deviceInfo.dataOnlineStatus as string] || '-' }}</span
            >
          </Col>
        </Row>
        <Row>
          <Col span="6"
            ><span>经度：</span
            ><span>{{ deviceInfo.longitude || '-' }}</span></Col
          >
          <Col span="6"
            ><span>纬度：</span
            ><span>{{ deviceInfo.latitude || '-' }}</span></Col
          >
          <Col span="6"
            ><span>高程：</span><span>{{ deviceInfo.height || '-' }}</span></Col
          >
          <Col span="6"
            ><span>地址：</span
            ><span>{{ deviceInfo.address || '-' }}</span></Col
          >
        </Row>
      </div>
    </div>
    <!-- </Card>
    <Card style="margin-top: 25px"> -->
    <div class="detail_module">
      <Tabs v-model:activeKey="activeKey" type="card">
        <TabPane :key="item.key" :tab="item.tab" v-for="item in tabs">
          <component
            :is="item.content"
            class="custom_dom"
            :stationId="deviceInfo.stationId"
            v-if="activeKey === item.key"
          ></component>
        </TabPane>
      </Tabs>
    </div>
    <!-- </Card> -->
  </div>
  <FormModal :columns="item">
    <template #details> 111 </template>
    <template #footer v-if="showModal === 'view'">
      <Button @click="close">取消</Button>
      <Button type="primary" @click="onView">预览</Button>
    </template>
  </FormModal>
</template>
<route lang="json">
{
  "name": "详情",
  "meta": { "title": "详情" }
}
</route>
<script setup lang="tsx">
import { computed, h, ref, shallowRef } from 'vue';
import { LeftOutlined } from '@ant-design/icons-vue';
import { useFormModal } from '@boeyo/hooks';
import { router } from '@boeyo/portal';
import { useDicts } from '@boeyo/portal';
import { BoFormProps } from '@boeyo/ui';
import { Button, Card, Col, Row, Space, TabPane, Tabs } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import Delay from './components/delay.vue';
import Run from './components/run.vue';
import Warn from './components/warn.vue';

const { deviceTypeEnum } = useDicts(['device_type']);
const route = useRoute();
const deviceInfo = ref(route.query);
const onlineEnum = {
  '0': '在线',
  '1': '离线',
};
const { FormModal, open, close, formRef } = useFormModal({
  size: 'middle',
  column: 1,
});
const activeKey = ref('Run');

const tabs = shallowRef([
  {
    tab: '运行统计',
    key: 'Run',
    content: Run,
  },
  {
    tab: '告警统计',
    key: 'Warn',
    content: Warn,
  },
  {
    tab: '延时统计',
    key: 'Delay',
    content: Delay,
  },
]);
const item = computed<BoFormProps['columns']>(() => {
  if (showModal.value === 'view') {
    return [
      {
        title: '月份',
        dataIndex: 'month',
        valueType: 'select',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '请选择月份',
              trigger: 'blur',
            },
          ],
        },
        fieldProps: {
          placeholder: '请选择月份',
        },
      },
      {
        title: '文件名',
        dataIndex: 'file',
        valueType: 'checkboxGroup',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '请选择文件',
              trigger: 'blur',
            },
          ],
        },
        fieldProps: {
          placeholder: '请选择文件',
          options: [
            { label: '运行统计', value: '1' },
            { label: '告警统计', value: '2' },
            { label: '延时统计', value: '3' },
          ],
        },
      },
    ];
  }
  return [
    {
      title: '',
      dataIndex: 'details',
      valueType: 'input',
      formItemProps: {
        wrapperCol: { span: 24 },
      },
    },
  ];
});
const showModal = ref('view');
const onDownLoad = () => {
  showModal.value = 'view';
  open({
    title: '运行日志',
    size: 'small',
    request: async (params: any) => {},
    defaultValue: {},
  });
};

const onView = async () => {
  await formRef.value.validate();
  showModal.value = 'download';
  open({
    title: '预览',
    size: 'middle',
    request: async (params: any) => {},
    defaultValue: {},
  });
};
</script>

<style lang="scss" scoped>
.run_details {
  .detail_module {
    padding: 20px;
  }
  .top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    .device_name {
      font-size: 18px;
      font-weight: 700;
    }
    border-bottom: 1.5px solid rgba(99, 134, 170, 0.5);
  }
  .info {
    padding-left: 25px;
  }
  .custom_dom {
    max-height: calc(100vh - 430px);
    padding: 10px;
    overflow-y: auto;
  }
}
:deep(.ant-tabs-nav) {
  &::before {
    border-bottom: 1.5px solid #7a9ecc !important;
  }
}
:deep(.ant-tabs-tab) {
  border-radius: 6px 6px 0 0 !important;
  margin-right: 10px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  &.ant-tabs-tab-active {
    background: #0d3457 !important;
    border: 1px solid #7a9ecc !important;
    border-bottom-color: #0d3457 !important;
    // transform: translateY(px);
    .ant-tabs-tab-btn {
      color: #fff !important;
    }
  }
}
</style>
